<template>
	<view class="">
		<!--状态图标-->
		<view class="status-img-view">
			<image class="are-img" src="/static/images/common/are.png" mode="widthFix" />
			<!-- <view class="text-align-center">{{details.globalStatusText}}</view> -->
		</view>
		<!-- 收货人信息 -->
		<view class="info-plate">
			<view class="title">收货人信息</view>
			<view class="text-black">
				<view class="">
					<view class="">收货人: {{details.shipName}} {{details.shipMobile}} {{details.confirmStatusText}}</view>
					<view class="text-gray fsize-26">{{details.shipAreaName}}{{details.shipAddress}}</view>
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="info-plate mt-20">
			<view class="title">商品信息</view>
			<view class="text-black">
				<view class="flex mb-20" v-for="(item, index) in details.items" :key="index">
					<image class="width-156 height-156 shrink0" :src="item.imageUrl"></image>
					<view class="ml-20 w-100">
						<view class="">{{item.name}}</view>
						<view class="flex justify-between fsize-26">
							<text class="text-red">￥{{item.price}}</text>
							<text>数量: {{item.nums}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 付款信息 -->
		<view class="info-plate mt-20">
			<view class="title">付款信息</view>
			<view class="text-black">
				<view class="flex justify-between">
					<text>商品总价</text>
					<text>￥{{details.orderAmount}}</text>
				</view>
				<view class="flex justify-between">
					<text>配送费用</text>
					<text>+ ￥{{details.costFreight}}</text>
				</view>
				<view class="flex justify-between">
					<text>应付金额</text>
					<text>￥{{details.payedAmount}}</text>
				</view>
				<view class="flex justify-between">
					<text>订单优惠金额</text>
					<text>￥{{details.orderDiscountAmount}}</text>
				</view>
				<view class="flex justify-between">
					<text>商品优惠金额</text>
					<text>￥{{details.goodsDiscountAmount}}</text>
				</view>
				<view class="flex justify-between">
					<text>优惠券优惠</text>
					<text>￥{{details.couponDiscountAmount}}</text>
				</view>
				<view class="flex justify-between">
					<text>积分优惠</text>
					<text>￥{{details.pointMoney}}</text>
				</view>
				<view class="flex justify-between">
					<text>优惠后金额</text>
					<text>￥{{details.payedAmount}}</text>
				</view>
				<view class="flex justify-between">
					<text>支付状态</text>
					<text>{{details.payStatusText}}</text>
				</view>
				<view class="fweigh-600 text-align-right">应付款: ￥{{details.payedAmount}}</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="info-plate mt-20">
			<view class="title">订单信息({{details.globalStatusText}})</view>
			<view class="text-black">
				<view class="flex justify-between">
					<text>订单编号</text>
					<text>{{details.orderId}}</text>
				</view>
				<view class="flex justify-between">
					<text>下单来源</text>
					<text>{{details.sourceText}}</text>
				</view>
				<view class="flex justify-between">
					<text>下单时间</text>
					<text>{{details.createTime}}</text>
				</view>
				<view class="flex justify-between">
					<text>支付方式</text>
					<text>{{details.paymentCodeText}}</text>
				</view>
				<view class="flex justify-between">
					<text>订单状态</text>
					<text>{{details.globalStatusText}}</text>
				</view>
				<view class="flex justify-between">
					<text>发货状态</text>
					<text>{{details.shipStatusText}}</text>
				</view>
				<view class="flex justify-between">
					<text>配送方式</text>
					<text>{{details.logisticsName}}</text>
				</view>
				<view class="flex justify-between">
					<text>商品总重量</text>
					<text>{{details.weight}}</text>
				</view>
			</view>
		</view>
		<!-- 下单用户 -->
		<view class="info-plate mt-20">
			<view class="title">下单用户</view>
			<view class="text-black">
				<view class="flex justify-between">
					<text>用户编号</text>
					<text>{{details.userId}}</text>
				</view>
				<view class="flex justify-between">
					<text>用户手机</text>
					<text>{{details.user.mobile}}</text>
				</view>
				<view class="flex justify-between">
					<text>用户昵称</text>
					<text>{{details.user.nickName}}</text>
				</view>
				<view class="flex justify-between">
					<text>微信号</text>
					<text>{{details.user.userWx}}</text>
				</view>
			</view>
		</view>
		<!-- 买家备注 -->
		<view class="info-plate mt-20">
			<view class="title">买家备注</view>
			<view class="text-black">
				<view class="">{{details.remaining || '无'}}</view>
			</view>
		</view>
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				details: {}
			}
		},
		onLoad(option) {
			this.orderId = option.id
			this.getDatails()
		},
		methods: {
			getDatails() {
				this.$reqJsonPost('CoreCmsOrderDetails', {
					id: this.orderId
				}).then(res => {
					this.details = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-plate {
		width: 650rpx;
		padding: 20rpx;
		margin-left: 30rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 14rpx #f1f1f1;
		;
		background-color: #fff;

		.title {
			font-weight: 600;
			padding-bottom: 20rpx;
			border-bottom: 1px #f1f1f1 solid;
		}

		.text-black {
			padding-top: 20rpx;
			line-height: 1.8;
		}
	}

	.status-img-view {
		background-color: #fff;
		padding: 40rpx 0;
		.are-img {
			display:block;
			width: 330rpx;
			margin: 0 auto;
		}


	}
</style>
